<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DIY记录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }
        
        header {
            background: linear-gradient(135deg, #625894 100%);
            color: white;
            padding: 2rem 0;
            text-align: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
        }
        
        .subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
        }
        
        .container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 1.5rem;
        }
        
        .records-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-top: 2rem;
        }
        
        .record-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
        }
        
        .record-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }
        
        .card-image {
            height: 180px;
            background-size: cover;
            background-position: center;
        }
        
        .no-image {
            background: linear-gradient(135deg, #f093fb 0%, #770fcc 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2rem;
        }
        
        .card-content {
            padding: 1.5rem;
        }
        
        .card-title {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
            color: #2c3e50;
        }
        
        .card-date {
            color: #7f8c8d;
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }
        
        .card-description {
            color: #555;
            font-size: 0.95rem;
        }
        
        .detail-container {
            max-width: 900px;
            margin: 2rem auto;
            padding: 0 1.5rem;
        }
        
        .detail-header {
            margin-bottom: 2rem;
        }
        
        .back-button {
            display: inline-flex;
            align-items: center;
            background: #6a11cb;
            color: white;
            padding: 0.7rem 1.2rem;
            border-radius: 8px;
            text-decoration: none;
            margin-bottom: 1.5rem;
            transition: background 0.3s;
        }
        
        .back-button:hover {
            background: #5a0db5;
        }
        
        .detail-title {
            font-size: 2.2rem;
            color: #2c3e50;
            margin-bottom: 0.5rem;
        }
        
        .detail-date {
            color: #7f8c8d;
            font-size: 1rem;
            margin-bottom: 1.5rem;
        }
        
        .detail-content {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }
        
        .detail-text {
            margin-bottom: 2rem;
            line-height: 1.7;
        }
        
        .content-block {
            margin-bottom: 2rem;
        }
        
        .content-block img {
            max-width: 100%;
            border-radius: 8px;
            margin: 1rem 0;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }
        
        .content-block video {
            max-width: 100%;
            border-radius: 8px;
            margin: 1rem 0;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }
        
        /* 加黑文本样式 */
        .bold-text {
            font-weight: bold;
            color: #2c3e50;
            padding: 0.2rem 0.4rem;
            border-radius: 4px;
        }
        
        footer {
            text-align: center;
            padding: 2rem 0;
            margin-top: 3rem;
            color: #7f8c8d;
            border-top: 1px solid #eee;
        }
        
        @media (max-width: 768px) {
            .records-grid {
                grid-template-columns: 1fr;
            }
            
            .detail-title {
                font-size: 1.8rem;
            }
            
            .video-player {
                height: 250px;
            }
        }
    </style>
</head>
<body>
    <!-- 主页面 -->
    <div id="main-page">
        <header>
            <h1>从代码到实物：DIY半导体设备</h1>
            <p class="subtitle">课程记录</p>
        </header>
        
        <div class="container">
            <div class="records-grid" id="records-container">
                <!-- DIY记录卡片将通过JavaScript动态生成 -->
            </div>
        </div>
        
        <footer>
            <p>集成电路科学与工程学院 张润洲</p>
        </footer>
    </div>
    
    <!-- 详情页面（初始隐藏） -->
    <div id="detail-page" style="display: none;">
        <header>
            <h1>从代码到实物：DIY半导体设备</h1>
            <p class="subtitle">课程记录</p>
        </header>
        
        <div class="detail-container">
            <a href="#" class="back-button" id="back-button">返回</a>
            
            <div class="detail-header">
                <h2 class="detail-title" id="detail-title">项目标题</h2>
                <p class="detail-date" id="detail-date">创建日期</p>
            </div>
            
            <div class="detail-content" id="detail-content">
                <!-- 详情内容将通过JavaScript动态生成 -->
            </div>
        </div>
        
        <footer>
            <p>集成电路科学与工程学院 张润洲</p>
        </footer>
    </div>

    <script>
        // DIY记录数据
        const diyRecords = [
            {
                id: 1,
                title: "课程介绍",
                date: "20250923 Class1",
                description: "介绍课程。",
                content: [
                    { 
                        type: "text", 
                        value: "That's it" 
                    }
                ]
            },
            {
                id: 2,
                title: "安装Git 注册Gitee",
                date: "20250928 Class2",
                description: "Git的安装与指令，Gitee的注册与仓库。",
                content: [
                    { 
                        type: "text", 
                        value: "<span class='bold-text'>安装Git</span>。" 
                    },
                    { 
                        type: "image", 
                        value: "Class2/Git Bash.png", 
                        
                    },
                    { 
                        type: "text", 
                        value: "<span class='bold-text'>Git的常用指令</span>：" 
                    },
                    { 
                        type: "text", 
                        value: "•从Gitee获取文件 git pull<br>•增加文件 git add .<br>•获取文件状态 git status<br>•存档文件 git commit -m '备注'<br>•上传文件 git push"
                    },
                    { 
                        type: "text", 
                        value: "<span class='bold-text'>Gitee的注册与仓库</span>：" 
                    },
                    { 
                        type: "image", 
                        value: "Class2/Gitee主页.png",  
                    },
                    { 
                        type: "image", 
                        value: "Class2/Gitee仓库.png",                         
                    },
                    { 
                        type: "text", 
                        value: "<span class='bold-text'>仓库链接</span>：https://gitee.com/misakazhang/swjtdiycourse" 
                    },
                ]
            },
            {
                id: 3,
                title: "3D建模",
                date: "20250930 Class3",
                description: "使用Fusion制作个性戒指。",
                content: [
                    { 
                        type: "text", 
                        value: "<span class='bold-text'>结果展示</span>" 
                    },                  
                    { 
                        type: "image", 
                        value: "Class3/DIY_1-个性戒指 建模.png", 
                    },
                    { 
                        type: "image", 
                        value: "Class3/DIY_1-个性戒指 渲染.png", 
                    },
                ]
            },
            {
                id: 4,
                title: "3D打印",
                date: "20251014 Class4",
                description: "3D打印130周年校庆模型。",
                content: [
                    { 
                        type: "text", 
                        value: "<span class='bold-text'>打印展示</span>" 
                    },                    
                    { 
                        type: "image", 
                        value: "Class4/打印机.jpg", 
                    },
                    { 
                        type: "image", 
                        value: "Class4/打印过程.png", 
                    },
                    { 
                        type: "image", 
                        value: "Class4/打印结果.jpg", 
                    },
                    { 
                        type: "text", 
                        value: "<span class='bold-text'>校庆模型介绍</span>：手机支架" 
                    }, 
                    { 
                        type: "image", 
                        value: "Class4/DIY_2-手机支架 建模 1.png", 
                    },
                    { 
                        type: "image", 
                        value: "Class4/DIY_2-手机支架 建模 2.png", 
                    },
                    { 
                        type: "image", 
                        value: "Class4/DIY_2-手机支架 渲染.png", 
                    }

            
                ]
            },
            {
                id: 5,
                title: "激光切割",
                date: "20251021 Class5",
                description: "",
                content: [
                    { 
                        type: "text", 
                        value: "<span class='bold-text'>软件介绍</span>EagleWorks" 
                    },
                    { 
                        type: "image", 
                        value: "Class5/软件介绍.png", 
                    },
                    { 
                        type: "text", 
                        value: "<span class='bold-text'>样图</span>" 
                    },
                    { 
                        type: "image", 
                        value: "Class5/1.png", 
                    },
                    { 
                        type: "text", 
                        value: "<span class='bold-text'>切割结果</span>" 
                    },
                    { 
                        type: "image", 
                        value: "Class5/0.jpg",
                    },
                    { 
                        type: "image", 
                        value: "Class5/1.jpg",
                    }
                ]
            },
            {
                id: 6,
                title: "嵌入式编程",
                date: "20251028 Class6",
                description: "",
                content: [ 
                    { 
                        type: "text", 
                        value: "<span class='bold-text'>所用软件</span>" 
                    },
                    { 
                        type: "image", 
                        value: "Class6/软件介绍.png", 
                    },
                    { 
                        type: "text", 
                        value: "<span class='bold-text'>开发板</span>" 
                    }, 
                    { 
                        type: "image", 
                        value: "Class6/2.jpg", 
                    },
                    { 
                        type: "text", 
                        value: "<span class='bold-text'>代码</span>" 
                    }, 
                    { 
                        type: "image", 
                        value: "Class6/1.png", 
                    },
                    { 
                        type: "text", 
                        value: "<span class='bold-text'>结果</span>闪烁蓝光" 
                    }, 
                    { 
                        type: "video", 
                        value: "Class6/3.mp4", 
                    }
            
                ]
            },
            {
                id: 7,
                title: "电焊教程",
                date: "20251104 Class7",
                description: "电焊基本知识",
                content: [
                    { 
                        type: "text", 
                        value: "That's it" 
                    }
                ]
            },
            {
                id: 8,
                title: "电焊实际操作",
                date: "20251111 Class8",
                description: "电焊实际操作",
                content: [
                    { 
                        type: "image", 
                        value: "class8/1.jpg",
                    },
                    { 
                        type: "image", 
                        value: "class8/2.1.jpg",
                    },
                    {
                        type: "image", 
                        value: "class8/2.2.jpg",
                    },
                    { 
                        type: "image", 
                        value: "class8/3.1.jpg",
                    },
                    { 
                        type: "image", 
                        value: "class8/3.2.jpg",
                    }
                ]
            },
        ];

        // DOM元素
        const mainPage = document.getElementById('main-page');
        const detailPage = document.getElementById('detail-page');
        const recordsContainer = document.getElementById('records-container');
        const backButton = document.getElementById('back-button');
        const detailTitle = document.getElementById('detail-title');
        const detailDate = document.getElementById('detail-date');
        const detailContent = document.getElementById('detail-content');

        // 生成记录卡片
        function generateRecordCards() {
            recordsContainer.innerHTML = '';
            
            diyRecords.forEach(record => {
                const card = document.createElement('div');
                card.className = 'record-card';
                
                // 检查是否有图片
                const hasImage = record.content.some(item => item.type === 'image');
                const imageUrl = hasImage ? 
                    record.content.find(item => item.type === 'image').value : '';
                
                card.innerHTML = `
                    <div class="card-image ${!hasImage ? 'no-image' : ''}" 
                         style="${hasImage ? `background-image: url('${imageUrl}')` : ''}">
                        ${!hasImage ? '从代码到实物：DIY半导体设备' : ''}
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">${record.title}</h3>
                        <p class="card-date">${record.date}</p>
                        <p class="card-description">${record.description}</p>
                    </div>
                `;
                
                card.addEventListener('click', () => showDetail(record.id));
                recordsContainer.appendChild(card);
            });
        }

        // 显示详情页面
        function showDetail(recordId) {
            const record = diyRecords.find(r => r.id === recordId);
            
            if (record) {
                // 更新详情页面内容
                detailTitle.textContent = record.title;
                detailDate.textContent = record.date;
                
                // 生成内容块
                detailContent.innerHTML = '';
                
                record.content.forEach(item => {
                    const block = document.createElement('div');
                    block.className = 'content-block';
                    
                    if (item.type === 'text') {
                        block.innerHTML = `<p>${item.value}</p>`;
                    } else if (item.type === 'image') {
                        block.innerHTML = `
                            <img src="${item.value}" alt="${item.caption || ''}">
                            ${item.caption ? `<p style="text-align: center; color: #666; font-style: italic; margin-top: 0.5rem;">${item.caption}</p>` : ''}
                        `;
                    } else if (item.type === 'video') {
                        block.innerHTML = `
                            <video controls class="video-player">
                                <source src="${item.value}" type="video/mp4">
                                您的浏览器不支持视频播放。
                            </video>
                            ${item.caption ? `<p style="text-align: center; color: #666; font-style: italic; margin-top: 0.5rem;">${item.caption}</p>` : ''}
                        `;
                    }
                    
                    detailContent.appendChild(block);
                });
                
                // 切换页面显示
                mainPage.style.display = 'none';
                detailPage.style.display = 'block';
            }
        }

        // 返回主页
        backButton.addEventListener('click', (e) => {
            e.preventDefault();
            mainPage.style.display = 'block';
            detailPage.style.display = 'none';
        });

        // 初始化页面
        generateRecordCards();
    </script>
</body>
</html>